@import "./global.less";
@color: #4D926F;
@memeda:red;

#header {
    color: @color;
}
h2 {
    color: @color;
}
h1{
    color:@mincolor;
    font-size: 70px;
}

//混合（Mixins）
//混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
//我们还可以带参数地调用，就像使用函数一样。

.home(@radius:20px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius:@radius;
    -o-border-radius:@radius;
    border-radius:@radius;
    width: 100px;
    height:100px;
    border:1px solid deepskyblue;
}
#about_1{
    .home;
}
#about_2{
    .home(40px);
}


//我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
.container{
   h1{
       font-size: 26px;
       font-weight: bold;
   }
   p{
       font-size:20px;
       color:deepskyblue;

       a{
            text-decoration: overline;
            &:hover{
                font-size:16px;
                color:deeppink;
            }
       }
   }
}


//运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
//LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
@little-border:1px;
@orgin-color:#111;
@red:#842210;

#my-header{
    font-size:(@little-border*20);
    color:(@orgin-color*2);
}
